import React from 'react';
import ScaleBar from '@/pages/Work/components/ScaleBar';
import moment from 'moment';
import { stringify } from 'qs';

const ScaleChart = props => {
    const { data = {}, toPercent, companyId } = props;
    const {
        quarterCompletedRecruiterNum = 0,
        quarterExecutingRecruiterNum = 0,
        quarterWaitentryRecruiterNum = 0,
        quarterNotstartRecruiterNum = 0
    } = data;

    const allNum =
        quarterCompletedRecruiterNum +
        quarterExecutingRecruiterNum +
        quarterWaitentryRecruiterNum +
        quarterNotstartRecruiterNum;
    const renderBarWidth = type => {
        if (
            quarterCompletedRecruiterNum === 0 &&
            quarterExecutingRecruiterNum === 0 &&
            quarterWaitentryRecruiterNum === 0 &&
            quarterNotstartRecruiterNum === 0
        ) {
            return '25%';
        }
        if (type === 'a') {
            return toPercent(quarterCompletedRecruiterNum, allNum);
        }
        if (type === 'b') {
            return toPercent(quarterExecutingRecruiterNum, allNum);
        }
        if (type === 'c') {
            return toPercent(quarterWaitentryRecruiterNum, allNum);
        }
        if (type === 'd') {
            return toPercent(quarterNotstartRecruiterNum, allNum);
        }
        return '';
    };
    const getLink = name => {
        const searchValue = {
            companyId,
            startTime: moment()
                .startOf('quarter')
                .format('YYYY-MM-DD'),
            endTime: moment()
                .endOf('quarter')
                .format('YYYY-MM-DD')
        };
        const serviceStatus = ['1', '4', '5', '6', '7'];
        let link = '';
        serviceStatus.map(item => {
            link += `&serviceStatus=${item}`;
            return '';
        });
        if (name === '已完成') {
            return `/office/organization/staff?${stringify(searchValue)}${link}`;
        }
        if (name === '进行中') {
            return `/office/personnelManagement/recruit/position?schedule=recruit_hiring&${stringify(searchValue)}`;
        }
        if (name === '待入职') {
            return `/office/personnelManagement/onboardAndLeave/entryManagement?&${stringify(searchValue)}`;
        }
        if (name === '未开始') {
            return `/office/personnelManagement/recruit/position?schedule=recruit_waiting&${stringify(searchValue)}`;
        }
        return '';
    };

    return (
        <div style={{ padding: '32px 0 15px 0' }}>
            <ScaleBar
                scaleData={[
                    {
                        text: `已完成 ${quarterCompletedRecruiterNum}`,
                        style: { backgroundColor: '#FFA22D', width: renderBarWidth('a') },
                        tip: `已完成 ${quarterCompletedRecruiterNum}`,
                        link: getLink('已完成'),
                        hide: Number(quarterCompletedRecruiterNum) === 0 && !(allNum === 0)
                    },
                    {
                        text: `进行中 ${quarterExecutingRecruiterNum}`,
                        style: {
                            backgroundColor: '#FFC53D',
                            width: renderBarWidth('b')
                        },
                        tip: `进行中 ${quarterExecutingRecruiterNum}`,
                        link: getLink('进行中'),
                        hide: Number(quarterExecutingRecruiterNum) === 0 && !(allNum === 0)
                    },
                    {
                        text: `待入职 ${quarterWaitentryRecruiterNum}`,
                        style: {
                            backgroundColor: '#FFD666',
                            width: renderBarWidth('c')
                        },
                        tip: `待入职 ${quarterWaitentryRecruiterNum}`,
                        link: getLink('待入职'),
                        hide: Number(quarterWaitentryRecruiterNum) === 0 && !(allNum === 0)
                    },
                    {
                        text: `未开始 ${data.quarterNotstartRecruiterNum}`,
                        style: {
                            backgroundColor: 'rgba(0,0,0,0.15)',
                            width: renderBarWidth('d')
                        },
                        tip: `未开始 ${quarterNotstartRecruiterNum}`,
                        link: getLink('未开始'),
                        hide: Number(quarterNotstartRecruiterNum) === 0 && !(allNum === 0)
                    }
                ]}
            />
        </div>
    );
};

export default ScaleChart;
